<template>
	<div class="material-info">
		<el-card>
			<div class="toolbar">
				<el-input v-model="keyword" placeholder="搜索物料编号/名称/供应商" clearable style="width:220px" />
				<el-button type="primary" @click="openDialog()">新增物料</el-button>
			</div>
			<el-table :data="filteredData" border size="small">
				<el-table-column prop="code" label="物料编号" width="120" />
				<el-table-column prop="name" label="物料名称" width="150" />
				<el-table-column prop="type" label="类型" width="100" />
				<el-table-column prop="spec" label="规格" width="120" />
				<el-table-column prop="unit" label="单位" width="80" />
				<el-table-column prop="location" label="存储位置" width="110" />
				<el-table-column prop="supplier" label="供应商" width="90" />
				<el-table-column prop="remark" label="备注" />
				<el-table-column label="操作" width="140">
					<template #default="scope">
						<el-button size="small" @click="openDialog(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="removeRow(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 新增/编辑弹窗 -->
		<el-dialog v-model="dialog.visible" :title="dialog.editIndex >= 0 ? '编辑物料' : '新增物料'" width="400px">
			<el-form :model="dialog.data" label-width="82px">
				<el-form-item label="物料编号">
					<el-input v-model="dialog.data.code" />
				</el-form-item>
				<el-form-item label="物料名称">
					<el-input v-model="dialog.data.name" />
				</el-form-item>
				<el-form-item label="类型">
					<el-select v-model="dialog.data.type" placeholder="请选择类型">
						<el-option label="原料药" value="原料药" />
						<el-option label="辅料" value="辅料" />
						<el-option label="包装材料" value="包装材料" />
						<el-option label="成品" value="成品" />
					</el-select>
				</el-form-item>
				<el-form-item label="规格">
					<el-input v-model="dialog.data.spec" />
				</el-form-item>
				<el-form-item label="单位">
					<el-input v-model="dialog.data.unit" />
				</el-form-item>
				<el-form-item label="存储位置">
					<el-input v-model="dialog.data.location" />
				</el-form-item>
				<el-form-item label="供应商">
					<el-input v-model="dialog.data.supplier" />
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="dialog.data.remark" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialog.visible = false">取消</el-button>
				<el-button type="primary" @click="saveRow">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'

// 15条医药相关模拟数据
const tableData = ref([
	{ code: 'MAT-202401', name: '头孢曲松钠原料', type: '原料药', spec: '500g/瓶', unit: '瓶', location: '原料库A', supplier: '国药集团', remark: '高纯度' },
	{ code: 'MAT-202402', name: '阿莫西林原粉', type: '原料药', spec: '1kg/袋', unit: '袋', location: '原料库B', supplier: '华润医药', remark: '' },
	{ code: 'MAT-202403', name: '乳糖', type: '辅料', spec: '10kg/袋', unit: '袋', location: '辅料库', supplier: '鲁南药业', remark: '' },
	{ code: 'MAT-202404', name: '硫酸镁', type: '辅料', spec: '10kg/袋', unit: '袋', location: '原料库B', supplier: '复星化工', remark: '医药级' },
	{ code: 'MAT-202405', name: '玻璃安瓿', type: '包装材料', spec: '10ml', unit: '只', location: '包材库', supplier: '恒瑞材料', remark: '' },
	{ code: 'MAT-202406', name: '铝箔', type: '包装材料', spec: '200mm×0.02mm', unit: '卷', location: '包材库', supplier: '山东恒力', remark: '' },
	{ code: 'MAT-202407', name: '聚乙烯薄膜', type: '包装材料', spec: '500m/卷', unit: '卷', location: '包材库', supplier: '恒力材料', remark: '防潮' },
	{ code: 'MAT-202408', name: '阿司匹林片', type: '成品', spec: '100片/瓶', unit: '瓶', location: '成品库', supplier: '云南白药', remark: '' },
	{ code: 'MAT-202409', name: '维生素C原粉', type: '原料药', spec: '1kg/袋', unit: '袋', location: '原料库A', supplier: '江苏天晴', remark: '' },
	{ code: 'MAT-202410', name: '包装彩盒', type: '包装材料', spec: '20x15x8cm', unit: '个', location: '包材库', supplier: '广州包装', remark: '' },
	{ code: 'MAT-202411', name: '瓶盖', type: '包装材料', spec: '2000个/箱', unit: '箱', location: '包材库', supplier: '江苏伟业', remark: '' },
	{ code: 'MAT-202412', name: '乙醇', type: '辅料', spec: '50L/桶', unit: '桶', location: '辅料库', supplier: '南方化学', remark: '' },
	{ code: 'MAT-202413', name: '葡萄糖', type: '辅料', spec: '25kg/包', unit: '包', location: '原料库A', supplier: '山东新华', remark: '' },
	{ code: 'MAT-202414', name: '铝塑泡罩板', type: '包装材料', spec: '100板/包', unit: '包', location: '包材库', supplier: '杭州包装', remark: '药用级' },
	{ code: 'MAT-202415', name: '碳酸钙', type: '辅料', spec: '5kg/袋', unit: '袋', location: '原料库B', supplier: '新华化工', remark: '' }
])

const keyword = ref('')
const filteredData = computed(() => {
	if (!keyword.value) return tableData.value
	return tableData.value.filter(
		d => d.code.includes(keyword.value) || d.name.includes(keyword.value) || d.supplier.includes(keyword.value)
	)
})

// 新增/编辑弹窗
const dialog = reactive({
	visible: false,
	data: { code: '', name: '', type: '', spec: '', unit: '', location: '', supplier: '', remark: '' },
	editIndex: -1
})

function openDialog(row) {
	if (row) {
		dialog.data = { ...row }
		dialog.editIndex = tableData.value.findIndex(d => d.code === row.code)
	} else {
		dialog.data = { code: '', name: '', type: '', spec: '', unit: '', location: '', supplier: '', remark: '' }
		dialog.editIndex = -1
	}
	dialog.visible = true
}

function saveRow() {
	if (dialog.editIndex >= 0) {
		tableData.value[dialog.editIndex] = { ...dialog.data }
	} else {
		tableData.value.unshift({ ...dialog.data })
	}
	dialog.visible = false
}

function removeRow(idx) {
	tableData.value.splice(idx, 1)
}
</script>

<style scoped>
.material-info {
	padding: 16px;
}

.toolbar {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
</style>
  
